<%@include file="/common/CHeader.jsp" %>
<%@page pageEncoding="UTF-8" %>
<body>
        <div id="app">

            <table class="table table-bordered table-hover definewidth m10">
                <template v-for="(value,key) in model">
                    <tbody>
                    <tr>
                        <td class="tableleft">{{il8message[key]}}</td>
                        <td>
                            <input class="form-control" type="text" v-model="model[key]"/>
                        </td>
                    </tr>
                    </tbody>
                </template>
                    <tr>
                        <td class="tableleft"></td>
                        <td>
                            <button class="btn btn-primary" @click="insert()">新增角色</button>
                        </td>
                    </tr>
                </table>
        </div>


<script>
    var userId = -1;

    Vue.component('tip', {
        props: ['msg', 'status', 'classname'],
        template: '<span v-bind:class="classname">{{msg}}{{status}}</span>'
    })

    var vm = new Vue({
        el: '#app',
        //需要注入的模板的父元素
        data: {
            model: {},                                                 //主要解析数据
            checkbox_val: {}, //没什么卵用目前。标注哪些要做特殊INPUT适配
            need_hidden: ['roleId'],
            hidden: {},                                                //存储隐藏的不需要更新的字段
            need_unedit: [],
            unedit: {},
            il8message: {roleName: '<spring:message code="role.name"/>', roleSign: "标志", description: "描述"},//字段的中文标注，后期做到一个统一的库里面
            return_msg: {}
        }, //end data
        created: function () {
            $.post("roleExamlpe.json", null, function (data) {
                makeHiddenObj(vm.need_hidden, data, vm.hidden);                 //拆分出不需要更新的hidden字段
                makeHiddenObj(vm.need_unedit, data, vm.unedit);                 //拆分出不可以编辑的eidt字段
                vm.model = data;
                console.log(vm.hidden);

            });
        },
        methods: {
            insert: function () {
                extendJsons(['hidden', 'unedit'], vm.model, vm);               //合并所有表值
                var postData = $.toJSON(vm.model);
                console.log(postData);
                $.ajax({
                    type: 'POST',
                    url: "add.json",
                    data: postData,
                    dataType: 'json',
                    contentType: "application/json",
                    success: function (data) {
                        vm.return_msg = data;
                        console.log(vm.return_msg);
                    },
                    error: function (data) {
                        vm.return_msg = data;
                    }

                });
            }
        }
    });


</script>
</body>
</html>
